<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vuejs</title>
<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div v-if="show">hello world</div><!--操作DOM 删除和新增节点-->
		<div v-show="show">hello world</div><!-- 通过display控制显示隐藏-->
		<button @click="tabtog">toggle</button>
		<ul>
			<li v-for="(item,index) of list" :key="index">{{item}}</li><!-- :key 要求循环中每一项的数值不能相同  item代表每一项的值,index代表值的下标-->
		</ul>
	</div> 
<script>
	new Vue({
		el:'#root',
		data:{
			show:true,
			list:[1,2,3],
		},
		methods:{
			tabtog:function(){
				this.show = !this.show;
			}
		},
	});
</script>
</body>
